<template>
  <el-form :inline="true" :model="search" class="demo-form-inline">
    <el-form-item label="订单号">
      <el-input v-model="search.orderNo"/>
    </el-form-item>
    <el-form-item label="支付状态">
      <el-select
          v-model="search.payStatus"
          style="width: 180px"
      >
        <el-option
            v-for="item in payStatusList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getChargingRecordList">查询</el-button>
      <el-button type="primary" @click="deviceReset">重置</el-button>
    </el-form-item>
  </el-form>


  <!-- table -->
  <el-table :data="payOrderList" style="width: 80%">
    <el-table-column prop="orderNo" label="订单号" width="350"/>
    <el-table-column prop="totalAmount" label="总金额" width="100"/>
    <el-table-column prop="actualAmount" label="实际支付金额" width="120"/>
    <el-table-column prop="channel" label="支付方式" width="120" :formatter="channelFormatter"/>
    <el-table-column prop="payStatus" label="支付状态" width="100">
      <template #default="{ row }">
      <span :class="getStatusClass(row.payStatus)">
        {{ payStatusFormatter(row.payStatus) }}
      </span>
      </template>
    </el-table-column>
    <el-table-column prop="payTime" label="支付时间" width="180"/>
  </el-table>
  <div v-show="showPagination">
    <el-pagination :page-size="10" :pager-count="totalPage" layout="prev, pager, next" :total="totalCount"
                   @current-change="handlePageChange"/>
  </div>
  <!-- dialog -->
  <el-dialog width="30%" :modal="staffInfo" v-model="dialogDetailVisible">
    <el-form ref="formRef" label-width="100px">
      <el-form-item label="投资人">
        <el-input v-model="station.userName"></el-input>
      </el-form-item>
      <el-form-item label="站点名称">
        <el-input v-model="station.stationName"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="station.address"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-input v-model="station.status"></el-input>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-input v-model="station.createTime"></el-input>
      </el-form-item>
      <el-form-item>
        <!-- <el-button type="primary" @click="onSubmitDetail">提交</el-button> -->
        <el-button type="primary" @click="DetailClose">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import {ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {PayOrderList} from '@/api/pay.js'

const showPagination = ref(false);
const totalCount = ref(0)
const totalPage = ref(0)
const dialogDetailVisible= ref(false)

const search = ref({
  pageSize: 10,
  currentPage: 1,
  orderNo: '',
  payStatus: '',
})

const payOrderList = ref([])

getChargingRecordList();

function deviceReset() {
  search.value.orderNo = '';
  search.value.payStatus = '';
}
function getChargingRecordList() {
  PayOrderList(search.value).then(res => {
    if (res.data.code === 200000) {
      payOrderList.value = res.data.data.data;
      if (res.data.data.total > 0) {
        showPagination.value = true;
        totalPage.value = res.data.data.total%search.value.pageSize === 0 ? res.data.data.total/search.value.pageSize : res.data.data.total/search.value.pageSize +1;
        totalCount.value = res.data.data.total;
      }
    } else {
      ElMessage.error(res.data.message)
    }
  }).catch(err => {
    ElMessage.error("获取数据失败")
  })
}

function handlePageChange(newPage) {
  search.value.currentPage = newPage
  PayOrderList(search.value)
      .then(res => {
        if (res.data.code === 200000) {
          payOrderList.value = res.data.data.data
          if (res.data.data.total > 0) {
            showPagination.value = true;
            totalPage.value = res.data.data.total%search.value.pageSize === 0 ? res.data.data.total/search.value.pageSize : res.data.data.total/search.value.pageSize +1;
            totalCount.value = res.data.data.total;
          }
        } else {
          //错误提示框
          ElMessage.error(res.data.message)
        }
      })
}


function payStatusFormatter(cellValue) {
  if (cellValue === 0) {
    return "未支付";
  }  else if (cellValue === 1) {
    return "支付完成";
  }  else if (cellValue === 2) {
    return "支付失败";
  }  else if (cellValue === 3) {
    return "已退款";
  } {
    return "未知状态";
  }
}

function channelFormatter(row, column, cellValue) {
  if (cellValue === 1) {
    return "支付宝支付";
  } else if (cellValue === 2) {
    return "微信支付";
  } else if (cellValue === 3) {
    return "银联支付";
  } else {
    return "其他支付";
  }
}

const payStatusList = ref([
  {id: 0, name: '未支付'},
  {id: 1, name: '支付中'},
  {id: 2, name: '支付完成'},
  {id: 3, name: '支付失败'}
])



function DetailClose() {
  dialogDetailVisible.value = false;
}



function getStatusClass(status) {
  switch (status) {
    case 0:
      return 'text-forestgreen'
    case 1:
      return 'text-green'
    case 2:
      return 'text-red'
    case 3:
      return 'text-black'
    default:
      return ''
  }
}
</script>

<style>
.text-forestgreen {
  color: forestgreen;
}

.text-green {
  color: blue;
}

.text-red {
  color: red;
}

.text-black {
  color: black;
}
</style>